<template>
  <div class="device-page">
    <!-- 顶部导航 -->
    <header class="header">
      <div class="header-back" @click="goBack">←</div>
      <h1 class="header-title">设备管理</h1>
      <div class="header-close">×</div>
    </header>

    <!-- 搜索输入框 -->
    <div class="search-bar">
      <i class="iconfont icon-search"></i>
      <input
        type="text"
        class="search-input"
        placeholder="请输入搜索内容"
        v-model="searchQuery"
        @input="filterDevices"
      />
    </div>

    <!-- 筛选条件 -->
    <div class="filter-bar">
      <div class="filter-item" @click="sortDevices('grade')">
        等级 <i :class="'iconfont ' + getSortIcon('grade')"></i>
      </div>
      <div class="filter-item" @click="sortDevices('type')">
        类型 <i :class="'iconfont ' + getSortIcon('type')"></i>
      </div>
      <div class="filter-item" @click="sortDevices('status')">
        状态 <i :class="'iconfont ' + getSortIcon('status')"></i>
      </div>
    </div>

    <!-- 设备列表 -->
    <div class="device-list">
      <div class="device-item" v-for="(device, index) in devices" :key="index">
        <img  class="device-image" alt="设备图片" />
        <div class="device-info">
          <div class="device-title">{{ device.deviceName }}（{{ device.deviceCode }}）</div>
          <div class="device-tags">
            <span :class="'tag enabled'">{{ device.deviceStatus }}</span>
            <span class="tag grade">{{ device.warranty }}</span>
            <span class="tag group">{{ device.deviceLocation }}</span>
            <span class="tag type">{{ device.deviceType }}</span>
          </div>
          <div class="device-location">
            <i class="iconfont icon-location"></i> {{ device.location }}
          </div>
          <button class="details-button">查看详情</button>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <BottomNav :activeTab="'device'" />
  </div>
</template>

<script>
import BottomNav from "../components/mobileBottomNav.vue";
import {addSevice,list} from "@/api/wushui/site";
export default {
  name: "DevicePage",
  components: {
    BottomNav,
  },
  data() {
    return {
      searchQuery: "", // 搜索内容
      sortKey: "", // 当前排序键
      sortOrder: "asc", // 排序方式 (asc 正序 / desc 倒序)
      devices: [],
    };
  },
  computed: {

  },

  created() {
    this.getList();
  },
  methods: {
     getList() {
      this.loading = true;
      list(this.formData).then(response => {
        this.devices = response.rows;
        console.log(response)
        this.total = response.total;
        this.loading = false;
      });
    },
    // 返回上一页
    goBack() {
      alert("返回上一页");
    },
    // 设备排序逻辑
    sortDevices(key) {
      if (this.sortKey === key) {
        this.sortOrder = this.sortOrder === "asc" ? "desc" : "asc";
      } else {
        this.sortKey = key;
        this.sortOrder = "asc";
      }

      this.devices.sort((a, b) => {
        if (this.sortOrder === "asc") {
          return a[key] > b[key] ? 1 : -1;
        } else {
          return a[key] < b[key] ? 1 : -1;
        }
      });
    },
    // 获取排序图标
    getSortIcon(key) {
      if (this.sortKey !== key) return "icon-unselected";
      return this.sortOrder === "asc" ? "icon-ascending" : "icon-descending";
    },
    // 搜索过滤设备
    filterDevices() {
      const query = this.searchQuery.toLowerCase();
      this.devices = this.devices.filter((device) =>
        device.name.toLowerCase().includes(query)
      );
    },
  },
};
</script>

<style scoped>
/* 页面整体样式 */
.device-page {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  padding-bottom: 60px; /* 防止底部导航遮盖内容 */
}

/* 顶部导航 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  padding: 10px 15px;
  border-bottom: 1px solid #eaeaea;
}

.header-back,
.header-close {
  font-size: 18px;
  cursor: pointer;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 搜索栏 */
.search-bar {
  background: white;
  border-bottom: 1px solid #eaeaea;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input {
  flex: 1;
  border: none;
  background: #f9f9f9;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  outline: none;
}

/* 筛选栏样式 */
.filter-bar {
  background: white;
  padding: 10px 15px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #eaeaea;
}

.filter-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}

.filter-item i {
  font-size: 12px;
  margin-left: 5px;
}

/* 设备列表 */
.device-list {
  padding: 10px;
}

.device-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: white;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.device-image {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
}

.device-info {
  flex: 1;
}

.device-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.device-tags {
  display: flex;
  flex-wrap: wrap;
  margin: 5px 0;
}

.tag {
  font-size: 12px;
  padding: 2px 5px;
  margin: 2px;
  border-radius: 4px;
  color: white;
}

.tag.enabled {
  background: #28a745;
}

.tag.disabled {
  background: #dc3545;
}

.tag.grade {
  background: #007bff;
}

.tag.group {
  background: #ffc107;
  color: black;
}

.tag.type {
  background: #6c757d;
}

.device-location {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
}

.details-button {
  margin-top: 5px;
  padding: 5px 10px;
  background: #007bff;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  width: fit-content;
}

.details-button:hover {
  background: #0056b3;
}
</style>
